<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
    <script src="https://cdn.staticfile.org/vue-router/2.7.0/vue-router.min.js"></script>
    <style>
        .style1 {
            background: #0bb20c;
            color: white;
            height: 300px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="main">
            <div>
                <button @click="gofirst">第1页</button>
                <button @click="gosecond">第2页</button>
                <button @click="gothird">第3页</button>
                <button @click="gofouth">第4页</button>
                <button @click="pre">后退</button>
                <button @click="next">前进</button>
                <button @click="replace">替换</button>
                <div class="style1">
                    <router-view></router-view>
                </div>

            </div>
        </div>
    </div>
    <script>
        const first = {
            template: '<h3>第1页内容</h3>'
        }
        const second = {
            template: '<h3>第2页内容</h3>'
        }
        const third = {
            props: ['id'],
            template: '<h3>第3页内容--{{id}}</h3>'
        }
        const fouth = {
            template: '<h3>第4页内容</h3>'
        }
        const special = {
            template: '<h3>特殊内容</h3>'
        }
        const router = new VueRouter({
            routes: [
                {
                    path: '/first',
                    component: first
                },
                {
                    path: '/second',
                    component: second
                },
                {
                    path: '/third/:id',
                    component: third,
                    props: true
                },
                {
                    path: '/fouth',
                    component: fouth
                },
                {
                    path: '/special',
                    component: special
                },
            ]
        })
        new Vue({
            el: '#app',
            data: {},
            methods: {
                gofirst: function () {
                    this.$router.push({ path: '/first' })
                },
                gosecond: function () {
                    this.$router.push({ path: '/second' })
                },
                gothird: function () {
                    this.$router.push({ path: '/third' })
                },
                gofouth: function () {
                    this.$router.push({ path: '/fouth' })
                },
                next: function () {
                    this.$router.go(1)
                },
                pre: function () {
                    this.$router.go(-1)
                },
                replace: function () {
                    this.$router.replace({ path: '/special' })
                },
            },
            router: router,
        })
    </script>
</body>

</html>
